<template>
    <div class="page-content">
        <h3>表单</h3>
        <el-form :model="searchForm" ref="searchFormRef" label-width="auto" style="padding-bottom: 1.5rem">
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="表单名称：" prop="name">
                        <el-input v-model="searchForm.name" placeholder="请输入表单名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="创建人：" prop="createPeople">
                        <el-select v-model="searchForm.createPeople" placeholder="请选择创建人" clearable>
                            <!-- <el-option v-for="item in baomingOptions" :key="item.value" :label="item.label"
                                :value="item.value" /> -->
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="创建人：" prop="status">
                        <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
                            <!-- <el-option v-for="item in baomingOptions" :key="item.value" :label="item.label"
                                :value="item.value" /> -->
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-button @click="addFormList" v-ripple>新增表单</el-button>
                </el-col>
            </el-row>
        </el-form>
        <ArtTable :data="tableData" :loading="tableLoading" :currentPage="pageNum" :pageSize="pageSize"
            :total="pageTotal" @current-change="currentChange" @size-change="sizeChange">
            <template #default>
                <el-table-column label="表单名称" prop="mobile" align="center" />
                <el-table-column label="回收时间" prop="mobile" align="center" />
                <el-table-column label="状态" prop="mobile" align="center" />
                <el-table-column label="关联内容" prop="mobile" align="center" />
                <el-table-column label="填写份数" prop="mobile" align="center" />
                <el-table-column label="创建人" prop="mobile" align="center" />
                <el-table-column fixed="right" label="操作" align="center">
                    <template #default="scope">
                        <!-- <el-tooltip class="box-item" effect="dark" content="练习记录" placement="top-start">
                    <button-table type="record" @click="openStudentsInfo(scope.row.id)" />
                  </el-tooltip> -->
                    </template>
                </el-table-column>
            </template>
        </ArtTable>
    </div>
</template>
<script lang="ts" setup>
import { FormInstance } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const searchForm = reactive({
    name: '',
    createPeople: '',
    status: ''
})
const searchFormRef = ref<FormInstance>()
const addFormList = () => {
    router.push('/result/formCreate')
}
const tableData = ref([])
const tableLoading = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)
const pageTotal = ref(0)

const currentChange = (val: number) => {
    pageNum.value = val
}

const sizeChange = (val: number) => {
    pageSize.value = val
    pageNum.value = 1
}
</script>
<style lang="scss" scoped>
.page-content {
    h3 {
        font-weight: bold;
        margin-bottom: 20px;
    }
}
</style>